<template>
  <div class="add_form">
    <el-card>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules" class="demo-ruleForm">       
        <el-form-item label="员工姓名" prop="emploeeName">
          <el-input v-model="form.emploeeName" style="width: 65%;"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="emploeePosition">
            <el-input v-model="form.emploeePosition" style="width: 65%;"></el-input>
        </el-form-item>
        
        <el-form-item label="员工生日" prop="emploeeBirth">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.emploeeBirth" style="width: 40%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="入职时间" required prop="emploeeRecruited">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.emploeeRecruited" style="width: 40%;"></el-date-picker>
        </el-form-item>
              
        <el-form-item label="性别" prop="emploeeGender">
          <el-radio-group v-model="form.emploeeGender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="年薪" prop="emploeeSalary">
          <el-input placeholder="请输入年薪" v-model.number="form.emploeeSalary" style="width: 35%;">
            <template #append>W</template>
          </el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="emploeeTel">
          <el-input v-model.number="form.emploeeTel" minlength="11" maxlength="11" style="width: 65%;"></el-input>
        </el-form-item>

          <el-form-item label="邮箱地址" prop="emploeeEmail">
          <el-input v-model="form.emploeeEmail" style="width: 65%;"></el-input>
        </el-form-item>



        <el-form-item>
          <el-button @click="addSubmit('form')" type="primary">添加员工</el-button>
          <el-button @click="resetForm('form')">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
</div>

</template>


<script>
export default {
    name:"add",
    data(){
    return{
      form:{
        emploeeName:"",
        emploeeGender:"",
        emploeeBirth:"",
        emploeeEmail:"",
        emploeeTel:"",
        emploeePosition:"",
        emploeeRecruited:"",
        emploeeSalary:"",
      },

      rules:{
        emploeeName:[
          {required: true,message:'请输入员工姓名',trigger:'blur'},
        ],
        emploeePosition:[
          { required: true,message:'请输入员工职位',trigger:'blur'}
        ],
        emploeeGender:[
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        emploeeTel:[
          {required: true,message:'请输入员工电话号码',trigger:'blur'},
          { type: 'number', message: '号码必须为数字值'},
          { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号格式不对',
            trigger: 'blur'
          }
        ],
        emploeeBirth:[
            { type: 'date', required: true, message: '请选择出生日期', trigger: 'change' }
        ],
        emploeeRecruited:[
            { type: 'date', required: true, message: '请选择入职日期', trigger: 'change' }
        ],
        emploeeSalary:[
          { required: true, message: '年薪不能为空'},
          { type: 'number', message: '年薪必须为数字值'}
        ],
         emploeeEmail:[
            { required: true,message:'请输入邮箱',trigger:'blur'},
            { type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change'],
          },
        ],
      }
    }
    },
    methods:{
      addSubmit(formName){
        /*var r = confirm("确认添加?")
        if (r == true) {
          // this.$axios.get("http://47.100.167.206:8082/Register/RegisterEmp?name="+this.emploeeName+"&gender="+this.emploeeGender+"&birth="+this.emploeeBirth+"&email="+this.emploeeEmail+"&telephone="+this.emploeeEmail)
          this.$axios.get("#?name="+this.emploeeName)
          .then(function(response){
            console.log(response);
          },function(err){
            alert("添加员工失败")
                      })
          } else {			
            alert("已经取消");
          }*/
          this.$refs[formName].validate((valid) => {
          if (valid) {
            var r = confirm("确认添加?")
        if (r == true) {
          this.$axios.get("http://47.100.167.206:8082/Register/RegisterEmp?name="+this.form.emploeeName+"&gender="+this.form.emploeeGender+"&birth="+this.form.emploeeBirth+"&email="+this.form.emploeeEmail+"&telephone="+this.form.emploeeEmail+"&position="+this.form.emploeePosition+"&recruited="+this.form.emploeeRecruited+"&salary="+this.form.emploeeSalary)
          //this.$axios.get("#?name="+this.emploeeName)
          .then(function(response){
            console.log(response);
          },function(err){
            alert("添加员工失败")
                      })
          } else {			
            alert("已经取消");
          }
          } else {
            console.log('error submit!!');
          }
        });
        },
        resetForm(formName) {//重置表格
          this.$confirm('清空?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$refs[formName].resetFields();
          }).catch(() => {
          });
        },
   } 
}
</script>

<style >
.add_form{
  width: 50%;
  margin:0 auto;
}
</style>

